import { defineStore } from "pinia";
import type {
  ResponseType,
  ImageProps,
  ListDictType,
  ListResType,
  ListReqType,
} from "./utils";
import { arrToObj, objToArr } from "../helper";
import axios from "axios";

export interface ColumnProps {
  _id: string;
  title: string;
  avatar?: ImageProps;
  description: string;
}

export interface GlobalColumnsProps {
  data: ListDictType<ColumnProps>;
  currentPage: number;
  total: number;
}

export const useColumnStore = defineStore("column", {
  state: (): GlobalColumnsProps => {
    return {
      data: {},
      currentPage: 0,
      total: 0,
    };
  },
  actions: {
    async fetchColumns(params: ListReqType = {}) {
      const { currentPage = 1, pageSize = 6 } = params;

      if (this.currentPage < currentPage) {
        const { data } = await axios.get<ListResType<ColumnProps>>(
          `/columns?currentPage=${currentPage}&pageSize=${pageSize}`
        );
        const { count, list } = data.data;

        this.$patch({
          currentPage,
          total: count,
          data: { ...this.data, ...arrToObj(list) },
        });
      }
    },
    async fetchColumn(cid: string) {
      if (!this.data[cid]) {
        const { data: rawData } = await axios.get<ResponseType<ColumnProps>>(
          `/columns/${cid}`
        );
        const { data } = rawData;
        this.data[data._id] = data;
      }
    },
  },
  getters: {
    getColumns: (state) => {
      return objToArr(state.data);
    },
    getColumnById: (state) => (id: string) => {
      return state.data[id];
    },
  },
});
